<template>
  <div class="contaniner">
    <h2>订单管理</h2>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="row1">
          <el-row padding="20px">
            <el-col :span="8"><el-form-item
              label-width="100px"

              label="订单编号:
"
            >
              <el-input
                v-model="params.id"

                class="el-col-8"
                placeholder="请输入订单编号"
              />
            </el-form-item></el-col>

            <el-col :span="8"> <el-form-item
              label="订单状态:

"
            >
              <el-select v-model="params.status" placeholder="请选择">
                <el-option label="待取件" value="23000" />
                <el-option label="已取件" value="23001" />
                <el-option label="网点自寄" value="23002" />
                <el-option label="网点入库" value="23003" />

              </el-select>
            </el-form-item></el-col>
            <el-col :span="8"> <el-form-item
              label="付费状态:

"
            >
              <el-select v-model="params.paymentStatus" placeholder="请选择">
                <el-option label="未付" value="1" />
                <el-option label="已付" value="2" />

              </el-select>
            </el-form-item></el-col>
          </el-row>
        </div>
        <div class="row2">
          <el-row>
            <el-col :span="8"><el-form-item
              label-width="100px"

              label="发件人姓名:

"
            >
              <el-input
                v-model="params.senderName"

                class="el-col-8"
                placeholder="请输入发件人姓名"
              />
            </el-form-item></el-col>
            <el-col :span="8"><el-form-item
              label-width="100px"

              label="发件人电话:

"
            >
              <el-input
                v-model="params.senderPhone"

                class="el-col-8"
                placeholder="请输入发件人电话"
              />
            </el-form-item></el-col>

            <el-col :span="8"> <el-form-item
              label="发件人地址:

"
            >
              <el-select v-model="params.senderProvinceId" placeholder="请选择" @change="getCity($event)">
                <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id" />

              </el-select>

              <!-- <li v-for="(item,index) in array" style="color:red">{{ item }} -- {{ index }}</li> -->

              <el-select v-model="params.senderCityId" placeholder="请选择" @change="getCounty($event)">
                <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id" />

              </el-select>
              <el-select v-model="params.senderCountyId" placeholder="请选择">

                <el-option v-for="item in County" :key="item.id" :label="item.name" :value="item.id" />

              </el-select>
            </el-form-item></el-col>
          </el-row>
        </div>
        <div class="row3">
          <el-row>
            <el-col :span="8"><el-form-item
              label-width="100px"

              label="收件人姓名:

"
            >
              <el-input
                v-model="params.receiverName"

                class="el-col-8"
                placeholder="请输入收件人姓名"
              />
            </el-form-item></el-col>
            <el-col :span="8"><el-form-item
              label-width="100px"

              label="收件人电话:
:

"
            >
              <el-input
                v-model="params.receiverPhone"

                class="el-col-8"
                placeholder="请输入收件人电话:
"
              />
            </el-form-item></el-col>

            <el-col :span="8"> <el-form-item
              label="收件人地址:
:

"
            >
              <el-select v-model="params.receiverProvinceId" placeholder="请选择" @change="getCity($event)">
                <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id" />

              </el-select>

              <!-- <li v-for="(item,index) in array" style="color:red">{{ item }} -- {{ index }}</li> -->

              <el-select v-model="params.receiverCityId" placeholder="请选择" @change="getCounty($event)">
                <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id" />

              </el-select>
              <el-select v-model="params.receiverCountyId" placeholder="请选择">

                <el-option v-for="item in County" :key="item.id" :label="item.name" :value="item.id" />

              </el-select>

            </el-form-item></el-col>
          </el-row>
        </div>

        <div class="row4">
          <el-footer>
            <el-button type="danger" @click="findList">搜索</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-footer>

        </div>

      </el-form>
    </div>

    <div class="footer">

      <el-table
        :data="list"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="150"
        />
        <el-table-column
          prop="id"
          label="订单编号"
          width="120"
        />
        <el-table-column

          label="运单编号"
          width="120"
        >
          <template v-slot="scope">
            <span>{{ scope.row.transportOrder.id }}</span>
            <!-- {{ scope.transportOrder.id }} -->
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          width="120"
        />
        <el-table-column
          label="订单状态"
          width="300"
        >
          <template v-slot="scope">
            {{ scope.row.status=== 22000?"已关闭":(scope.row.status===23009?"已签收":(scope.row.status===23000?"待取件":(scope.row.status===23001?"已取件":(scope.row.status===23002?"网点自寄":(scope.row.status===23004?"待装车":(scope.row.status===23005?"运输中":(scope.row.status===23006?"网点出库":(scope.row.status===23007?"等待派送":(scope.row.status===23008?"派送中":(scope.row.status===23010?"拒收":(scope.row.status===23003?"网点入库":"取消")))))))))) ) }}

          </template>

        </el-table-column>
        <el-table-column
          prop="senderName"
          label="发件人姓名"
          width="120"
        />
        <el-table-column
          prop="senderPhone"
          label="发件人电话"
          width="120"
        />
        <el-table-column
          label="发件人地址"
          width="120"
        >
          <template v-slot="scope">
            {{ scope.row.senderProvince.name + scope.row.senderCity.name + scope.row.senderCounty.name + scope.row.senderAddress }}

          </template>

        </el-table-column>
        <el-table-column
          prop="receiverName"
          label="收件人姓名"
          width="120"
        />
        <el-table-column
          prop="receiverPhone"
          label="收件人电话"
          width="120"
        />
        <el-table-column
          label="收件人地址"
          width="120"
        >
          <template v-slot="scope">
            {{ scope.row.receiverProvince.name + scope.row.receiverCity.name + scope.row.receiverCounty.name + scope.row.receiverAddress }}

          </template>

        </el-table-column>

        <el-table-column
          label="取件类型"
          width="120"
        >
          <template v-slot="scope">
            {{ scope.row.pickupType ===2 ?"上门取件":"网点自寄" }}

          </template>

        </el-table-column>

        <el-table-column
          label="付费类型"
          width="120"
        >
          <template v-slot="scope">
            {{ scope.row.paymentMethod ===2 ?"到付":"预结" }}

          </template>

        </el-table-column>

        <el-table-column
          label="付费状态"
          width="120"
        >
          <template v-slot="scope">
            {{ scope.row.paymentStatus===1?"未付":"已付" }}

          </template>

        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </div>
    </div>

  </div></template>

<script>

import { getOrderList } from '@/api/order.js'
import { getProvince } from '@/api/business'
export default {

  data() {
    return {

      formInline: {
        user: '',
        region: ''
      },

      params: {
        page: 1,
        pageSize: 10,
        id: '',
        status: '',
        paymentStatus: '',
        paymentMethod: '',
        senderName: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: '',
        senderProvinceId: '',
        senderCountyId: '',
        senderCityId: '',
        receiverCountyId: '',
        receiverProvinceId: '',
        receiverCityId: ''

      },
      list: [],
      total: 0,
      Province: [],
      City: [],
      County: []
    }
  },
  created() {
    this.getList()
    this.getArea()
  },
  methods: {
    async getCounty(e) {
      const data = { parentId: e }
      const res3 = await getProvince(data)
      this.County = res3.data
    },
    async getCity(e) {
      console.log(e)
      const data = { parentId: e }

      const res2 = await getProvince(data)
      console.log('EE', res2)

      this.City = res2.data
    },
    async getArea() {
      const res1 = await getProvince()
      this.Province = res1.data

      console.log('p', this.Province)
    },

    resetForm() {
      this.params = {
        page: 1,
        pageSize: 10,
        id: '',
        status: ''
      }
      this.getList()
    },
    findList() {
      this.params.page = 1
      this.getList()
    },
    handleCurrentChange(e) {
      console.log(e)
      this.params.page = e
      this.getList()
    },
    handleSizeChange(e) {
      console.log(e)
      this.params.pageSize = e
      this.getList()
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    onSubmit() {
      console.log('submit!')
    },
    getList() {
      getOrderList(this.params).then(res => {
        console.log('拿到列表数据', res)
        this.list = res.data.items
        this.total = Number(res.data.counts) // 总数量
      })
    }

  }
}
</script>

<style scoped>

.top{
   background-color: #fff;
    margin: 30px;

}

.contaniner{

    background-color: #f3f4f7;

}
.menu{
    margin: 30px;
}
.footer{
    padding:50px;
    background-color: #fff;
  margin:30px;

}
.pagination{
     display:flex;
justify-content: center;
}
.row1{
  padding:30px
}
.row2{
 padding: 30px;
}
.row3{
  padding-left:30px
}

</style>
